extends ../../src/pug/index.pug
block body
  -var bgImags = [0, 1, 2, 2,22 ]
  +click-extends({cover: 27, tip: 28, heights: bgImags})
    section.zero
      -var baseHeight = 2150
      +block-height({width:901, height: baseHeight + 650})
        +preview({img:13, width: '39%', height: '350px',})

      +block-height({width:901, height: baseHeight + 650})
        +preview({img:14, width: '50%', height: '350px', left: '50%'})

      +block-height({width:901, height: baseHeight + 1450})
        +preview({img:15, width: '43%', height: '80vw', left: '0',})

      +block-height({width:901, height: baseHeight + 1600})
        +preview({img:16, width: '53%', height: '80vw', left: '50%',})

      +block-height({width:901, height: baseHeight + 2210})
        +preview({img:17, width: '43%', height: '80vw', left: '30%',})

      +block-height({width:901, height: baseHeight + 2850})
        +preview({img:18, width: '43%', height: '80vw', left: '3%',})

      +block-height({width:901, height: baseHeight + 3000})
        +preview({img:19, width: '43%', height: '80vw', left: '50%',})

      +block-height({width:901, height: baseHeight + 3550})
        +preview({img:20, width: '48%', height: '80vw', left: '3%',})

      +block-height({width:901, height: baseHeight + 3800})
        +preview({img:21, width: '43%', height: '80vw', left: '53%',})


      +svg-elem(...bgImags)
        +foreign-images(...bgImags)
        +foreign-img({img:29, y: 1600})
          animate(attributeName=`opacity`, values=`1;0;1`, dur=`1s`, repeatCount="indefinite")

          animateTransform.click(
            attributeName='transform', type='translate', begin='.1s', dur='1s', values='0 -5 ;0 5;0 -5', 
            repeatCount='indefinite', calcMode='spline', keySplines='.5 0 .5 1;0 0 1 1', keyTimes='0;.8;1')

        +foreign-block({width:470, height: 660, degrees: 10, left: 525, top:baseHeight + 3780})
          +flip-card(3, 12)

        +foreign-block({width:470, height: 660, degrees: 80, left: 0, top: baseHeight + 3615, direct: 'right'})
          +flip-card(3, 11)

        +foreign-block({width:470, height: 660, degrees: 80, left: 350, top: baseHeight + 3080, direct: 'right'})
          +flip-card(3, 10)

        +foreign-block({width:470, height: 660, degrees: 10, left: 107, top: baseHeight + 2792})
          +flip-card(3, 9)

        +foreign-block({width:470, height: 660, degrees: 0, left: 209, top: baseHeight + 2265})
          +flip-card(3, 8)

        +foreign-block({width:470, height: 660, degrees: 15, left: 500, top: baseHeight + 1636})
          +flip-card(3, 7)

        +foreign-block({width:470, height: 660, degrees: 80, left: -89, top: baseHeight + 1492, direct: 'right'})
          +flip-card(3, 6)

        +foreign-block({width:470, height: 660, degrees: 80, left: 399, top: baseHeight +938, direct: 'right'})
          +flip-card(3, 5)

        +foreign-block({width:470, height: 660, degrees: 10, left: 50, top: baseHeight + 712})
          +flip-card(3, 4)

    +surface-height(...bgImags)
  +ford-footer
